embed

• 連結格式:
  1. Podcast - https://open.spotify.com/embed-podcast/episode/<podcast ID>
  2. Song - https://open.spotify.com/embed/track/<song ID>
• 取得內嵌程式碼:
  1. 打開桌面版spotify
  2. 開啟特定曲目或節目
  3. 點...圖示 > 分享 > 複製多個內嵌程式碼

長像這樣

以API取得資訊

到 Spotify for Developers 註冊應用程式

1. 到 https://developer.spotify.com/dashboard/applications 新增應用程式
2. 輸入應用名稱、描述後點選 create
3. 建立後點選 EDIT SETTINGS
4. 新增 Redirect URIs ，驗證結束後的重導向的連結需要完全一致，spotify會在這個重導向連結後面加上hash param，其中包含重要的 access_token
5. 複製 client ID，待會會用到

Authorization

Spotify的驗證流程總共有四種。如果是純Web前端的話，使用 Implicit Grant(Temporary user authorization)

官方有提供其中三種的驗證範例程式: https://github.com/spotify/web-api-auth-examples

簡單來說，這個流程可以在Web前端執行，只要有剛剛複製的client ID，就可以取得token，並透過token取得資訊。

不過要注意的是，token的有效時間是3600秒(1小時)。

除了 client ID 以外，還需要以下參數傳遞 -

• redirect_uri : 必要，設為 Redirect URIs 的其中一個連結
• response_type : 必要，設為token
• scopes : 選擇性，根據應用需求設定權限範圍 可到 https://developer.spotify.com/documentation/general/guides/scopes/ 參考
• state : 選擇性，可增加請求的安全性

程式演示

導向驗證頁面

const scopes = `streaming user-read-playback-position user-modify-playback-state user-read-playback-state user-read-private user-read-email`;
const redirectUri = `${API_HOST}/podcast/just_req=1`;
const authEndpoint = 'https://accounts.spotify.com/authorize';

const authURL = `${authEndpoint}?client_id=${encodeURIComponent(CFG_SPOTIFY_CLIENT_ID)}&scope=${encodeURIComponent(scopes)}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=token&state=123`;

window.location.href = authURL;

驗證成功後，解析連結取得token

interface I_RedirectParams {
    access_token?: string;
    token_type?: string;
    expires_in?: number;
    state?: string;
}

function getRedirectParams():I_RedirectParams {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while ( e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
}

const params = getRedirectParams();
if (params?.access_token) {
  // do something ...
}

spotify-web-api-js

npm: https://www.npmjs.com/package/spotify-web-api-js

安裝後，就可以直接以module的方式匯入，並將 spotify web api 用js wrap起來，提供一個方便的介面給開發者使用。另外他有type檔，ts開發者也可開心用。

import SpotifyWebApi from 'spotify-web-api-js';

const spotifyApi = new SpotifyWebApi();

// 拿到token先給spotifyApi
spotifyApi.setAccessToken(params.access_token);

// e.g. 取得podcast節目資訊
const showID = '21ww46sryVYYw8zKr7afqX';
spotifyApi.getShow(showID).then(data => console.log(data));  

如果要了解 spotify web api 本身的內容 可到 https://developer.spotify.com/documentation/web-api/

Web Playback SDK

官方: https://developer.spotify.com/documentation/web-playback-sdk/

spotify web api 在音訊的部分，只提供30秒的音檔連結。所以要取得完整的音源，要以 streaming 的方式取得，所以需要 Web Playback SDK 來做到這件事情。

首先先引入 SDK 的 script

<!-- Include the Web Playback SDK -->
<script src="https://sdk.scdn.co/spotify-player.js"></script>

新增player相關的event handler

在 ready事件取得device id，並往 https://api.spotify.com/v1/me/player/play 發 ajax

const play = (deviceID, token) => {
  const playaURL = `https://api.spotify.com/v1/me/player/play?device_id=${data.device_id}`;
  const d = { uris: ['spotify:track:5ya2gsaIhTkAuWYEMB0nw5'] };
  fetch(playaURL, {
    method: 'PUT',
    body: JSON.stringify(d),
    headers: new Headers({
        Authorization: `Bearer ${token}`,
    }),
  })
    .then((res) => res.json())
    .catch((error) => console.error('Error:', error))
    .then((response) => console.log('Success:', response));
}

if (_token) {
    window.onSpotifyPlayerAPIReady = () => {
        const player = new Spotify.Player({
            name: 'Web Playback SDK Template',
            getOAuthToken: (cb) => {
                cb(_token);
            },
        });

        // Error handling
        player.on('initialization_error', (e) => console.error(e));
        player.on('authentication_error', (e) => console.error(e));
        player.on('account_error', (e) => console.error(e));
        player.on('playback_error', (e) => console.error(e));

        // Playback status updates
        player.on('player_state_changed', (state) => {
            console.log(state);
        });

        // Ready
        player.on('ready', (data) => {
            if (data.device_id) {
                console.log('Ready with Device ID', data.device_id);
                play(data.device_id, _token)
            }
        });

        // Connect to the player!
        player.connect();
    };
}

注意事項

• Web Playback SDK 是以 EME(Encrypted Media Extensions) 實作。應用頁面須為 secure context。簡單來說就是要 https 開頭。如果是以 webpack dev server建立開發環境，設定 https:true 即可。
• scope 一定要有 streaming user-read-private user-read-email 這三項
• Web Playback SDK 需要 premium 會員才能使用

小記

後來因為需要 premium 才能往下一步前進，加上使用者會有 spotify 帳號的普及率不知道多高，主管就指示先pending 啦~

接下來有時間應該會先從比較普及的youtube開始著手，然後研究 react-player 在專案中的可行性。

後續這裡有新坑再來更新~